// Also see material design material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints

@import "grid-variables";
// Mixins are reserved for "smart stuffs", flex one-liners are kept intact
@import "grid-mixins";

.va-layout {
  @include va-container();

  &.fluid {
    @include va-container--fluid();
  }

  // NOTE Not exactly sure on this one. Here's what manual says:
  // > Make sure that col element height is fille d with parent and child. Important for Safari/Firefox if children is column element.
  &.fill-height {
    @include va-container--fill-height();

    > .va-row {
      flex: 1 1 auto;
      height: 100%;
    }
  }

  // This applies gutters. Otherwise grid has none.
  @each $size, $gutter in $grid-gutters {
    &.gutter--#{$size} {
      padding: $gutter;

      .va-row:only-child {
        margin: -($gutter / 2);
      }

      .va-row:not(:only-child) {
        margin: auto (-($gutter / 2));
      }

      *:not(:only-child) {
        .va-row:first-child {
          margin-top: -($gutter / 2);
        }

        .va-row:last-child {
          margin-bottom: -($gutter / 2);
        }
      }

      .va-row .flex {
        padding: $gutter / 2;
      }
    }
  }
}

.va-row {
  @include va-layout();
  &.row {
    flex-direction: row;

    &.reverse {
      flex-direction: row-reverse;
    }
  }

  &.column {
    flex-direction: column;

    &.reverse {
      flex-direction: column-reverse;
    }

    > .flex {
      max-width: 100%;
    }
  }

  &.wrap {
    flex-wrap: wrap;
  }
}

.flex-center {
  @include va-flex-center();
}

.flex {
  @include va-flex();
  @each $size, $width in $grid-breakpoints {
    @include va-flex--breakpoint($size) {
      @for $n from 1 through $grid-columns {
        @if $n != 0 {
          &.#{$size}#{$n} {
            @include va-flex--size($n);
          }

          &.order--#{$size}#{$n} {
            order: $n;
          }
        }
        // 0 offset is used to override offset from lower breakpoint.
        &.offset--#{$size}#{$n} {
          @include va-flex--offset($n);
        }
      }
    }
  }
}

.align {
  &--start {
    align-items: flex-start;
  }

  &--end {
    align-items: flex-end;
  }

  &--center {
    align-items: center;
  }

  &--baseline {
    align-items: baseline;
  }
}

.align-self {
  &--start {
    align-self: flex-start;
  }

  &--end {
    align-self: flex-end;
  }

  &--center {
    align-self: center;
  }

  &--baseline {
    align-self: baseline;
  }
}

.align-content {
  &--start {
    align-content: flex-start;
  }

  &--end {
    align-content: flex-end;
  }

  &--center {
    align-content: center;
  }

  &--space-between {
    align-content: space-between;
  }

  &--space-around {
    align-content: space-around;
  }
}

.justify {
  &--start {
    justify-content: flex-start;
  }

  &--end {
    justify-content: flex-end;
  }

  &--center {
    justify-content: center;
  }

  &--space-around {
    justify-content: space-around;
  }

  &--space-between {
    justify-content: space-between;
  }
}

.justify-self {
  &--start {
    justify-self: flex-start;
  }

  &--end {
    justify-self: flex-end;
  }

  &--center {
    justify-self: center;
  }

  &--baseline {
    justify-self: baseline;
  }
}

.spacer {
  @include va-spacer();
}

.grow {
  @include va-grow();
}

.shrink {
  @include va-shrink();
}

.overflow--hidden {
  overflow: hidden !important;
}

.overflow--visible {
  overflow: visible !important;
}

.overflow-y {
  overflow-y: auto;
}

.overflow-x {
  overflow-x: auto;
}

// Display helpers
.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

// Not solitary. Is used in other places.
.fill-height {
  height: 100%;
}

.no-wrap {
  @include va-no-wrap();
}

.ellipsis {
  @include va-ellipsis();
}

